import { Button } from 'antd'
import { useDispatch, useSelector } from 'react-redux'
import { increment, decrement, addNum } from '../store/modules/counterStore'
import { channelFuns } from '../store/modules/channelStore'
import { useEffect } from 'react'

export const day03_01 = function () {
    const { count } = useSelector(state => state.counter)
    const channelInfo = useSelector(state => state.channelInfo)

    const dispatch = useDispatch()
    useEffect(() => {
        dispatch(channelFuns.fetchChannelList())
    }, [])

    return (
        <>
            <h3>day03_01</h3>
            <div>{count}</div>
            <Button type="primary" onClick={() => dispatch(decrement())}>
                -
            </Button>
            <Button type="primary" onClick={() => dispatch(increment())}>
                +
            </Button>
            <Button type="primary" onClick={() => dispatch(addNum(-10))}>
                - 10
            </Button>
            <Button type="primary" onClick={() => dispatch(addNum(10))}>
                + 10
            </Button>

            <h3>interface redux</h3>

            {channelInfo.channelList.map((item: any) => {
                return <div key={item}>{item}</div>
            })}
        </>
    )
}
